<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3>使用自定义指令</h3>
    姓名：<input type="text" v-my-input:opration.click="msg"/>

</div>
</body>
</html>
<script src="../../js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello,custom directive",
        },
        directives: {
            "my-input": {
                // inserted：当该元素插入到父节点时，调用一次，且永远只会调用这一次
                // element: 被作用的元素，这里是指输入框
                inserted: function (element, binding, vnode) {
                    element.focus();
                    console.log(element); // input输入框对象
                    console.log(binding.value); // hello,custom directive
                    console.log(binding.expression);  //msg
                    console.log(binding.arg); //click
                    console.log(binding.modifiers); // 未知,这个可以省略
                    console.log(vnode); // 这个对象中的属性非常丰富，甚至可以看到源码等所有的内容
                },
            },

        }
    })
</script>
